<template>
  <view>
    <view class="overview-wrap" :style="balanceBg">
      <view class="balance-wrap">
        <view class="text">账户余额</view>
        <view class="flex-center">
          <view class="value">￥{{ money || '0.00' }}</view>
        </view>
      </view>
    </view>
    <view class="card-wrap" v-for="item in list" :key="item.id">
      <view class="card-title">{{ item.cusName }}</view>
      <view class="card-content">
        <text>当前余额</text>
        <view class="text-color-common-self"><text>￥</text>{{ item.accountBalance }}</view>
      </view>
      <view class="card-hr"></view>
      <view class="card-footer">
        <button v-if="estimateAuth" type="default" class="balance-btn text-color-common-self border-color-common-self"
          @click="estimatedBalance(item)">
          预估余额
        </button>
        <button v-if="rechargeAuth" class="recharge-btn" @click="rechargeChange(item)">
          充值
        </button>
      </view>
    </view>
    <uni-popup ref="estimatedBalancePop">
      <view class="balance-pop">
        <view class="pop-title">预估当前余额</view>
        <view class="pop-body">
          <view>
            <view class="label">账户余额</view>
            <view>
              <input :disabled="true" v-model="inputObj.accountBalance" />
            </view>
          </view>
          <view>
            <view class="label">未结算贷款</view>
            <view>
              <input :disabled="true" v-model="inputObj.unsettledAmount" />
            </view>
          </view>
          <view>
            <view class="label">预估当前余额</view>
            <view>
              <input :disabled="true" v-model="inputObj.forecastAmount" />
            </view>
          </view>
        </view>
        <view class="pop-footer" @click="closePop">
          <text class="text-color-common-self">确认</text>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
  import { getAccountData, getForecastAmount } from '@/api/wallet.js';
  import { toast, getButtonShow } from '@/utils/common';
  import config from '@/config';

  export default {
    data() {
      return {
        money: '0.00',
        list: [],
        inputObj: {
          accountBalance: '0.00',
          unsettledAmount: '0.00',
          forecastAmount: '0.00'
        },
        isMore: 'more',
        queryParam: {
          pageNo: 1,
          pageSize: 10
        },
        rechargeAuth: false,
        estimateAuth: false
      };
    },
    computed: {
      balanceBg() {
        if (this.$store.state.user.curTypeColor == '#D22C2C') {
          return `background: url(${config.baseImgUrl}/balance-red-bg.png) no-repeat;background-size: cover;`;
        } else {
          return `background: url(${config.baseImgUrl}/balance-bg.png) no-repeat;background-size: cover;`;
        }
      },
      transRecords() {
        return config.baseImgUrl + '/trans-records-icon.png';
      }
    },
    onLoad() {
      this.getButtonAuth();
      this.getAccountDataFn();
    },
    onPullDownRefresh() {
      this.queryParam.pageNo = 1;
      this.isMore = 'more';
      this.getAccountDataFn();
    },

    onReachBottom() {
      if (this.isMore == 'more') {
        this.queryParam.pageNo++;
        this.getAccountDataFn();
      }
    },
    methods: {
      async getAccountDataFn() {
        const res = await getAccountData(this.queryParam);
        if (res?.code === 0) {
          const result = res.data?.list || [];
          this.money = (res.data?.amountTotal || 0)?.toFixed(2);
          this.list = [...this.list, ...result];
          if (res?.data?.total == this.list.length) {
            this.isMore = 'noMore';
          } else {
            this.isMore = 'more';
          }
          wx.hideNavigationBarLoading();
          wx.stopPullDownRefresh();
        } else {
          toast(res.msg || '接口查询失败');
        }
      },
      async estimatedBalance(data) {
        this.getForecastAmountFn(data);
        this.$refs.estimatedBalancePop.open();
      },
      closePop() {
        this.$refs.estimatedBalancePop.close();
      },
      rechargeChange(item) {
        this.$tab.redirectTo(`/packageA/pages/my-wallet/recharge?id=${item.id}`);
      },
      async getForecastAmountFn(item) {
        const data = {
          purchaserId: item.purchaserId,
          supplierId: item.id
        };
        const res = await getForecastAmount(data);
        if (res.code === 0) {
          const result = res.data || {};
          Object.keys(result).forEach((key) => {
            this.inputObj[key] = result[key].toFixed(2);
          });
        } else {
          toast(res.msg || '接口查询失败');
        }
      },
      async getButtonAuth() {
        this.rechargeAuth = await getButtonShow('account-recharge-auth');
        this.estimateAuth = await getButtonShow('account-estimate-auth');
      }
    }
  };
</script>
<style lang="scss" scoped>
  .overview-wrap {
    padding: 35.56rpx;
    margin: 35.56rpx 24.89rpx;
    border-radius: 14.22rpx;

    button[type='default'] {
      height: 58.67rpx !important;
      padding: 0 50rpx !important;
      line-height: 58.67rpx !important;
      border-radius: 23px !important;
      background-color: #fff !important;
      box-shadow: 0px 3px 4px 0px rgba(8, 46, 181, 0.3) !important;
    }

    .balance-wrap {
      color: #ffffff;

      .text {
        text-align: center;
        font-size: 26.67rpx;
        letter-spacing: 1px;
      }

      .value {
        font-size: 67.56rpx;
        font-weight: 700;
      }

      >view {
        line-height: 80rpx;
      }
    }
  }

  .card-wrap {
    padding: 26.67rpx 17.78rpx 17.78rpx 17.78rpx;
    margin: 17.89rpx 24.89rpx 0 24.89rpx;
    background-color: #fff;

    >.card-title {
      font-size: 28.44rpx;
      color: #333333;
      font-weight: 500;
      line-height: 22px;
    }

    >.card-content {
      display: flex;
      margin-top: 4px;
      line-height: 22px;

      >text {
        font-size: 24rpx;
        color: #999999;
        margin-right: 17.78rpx;
      }

      view {
        font-size: 32rpx;
        font-weight: 600;

        >text {
          font-size: 24rpx;
          color: inherit;
        }
      }
    }

    .card-hr {
      margin: 20rpx 0 30rpx 0;
      border-top: 1px solid #f1f2f5;
    }

    >.card-footer {
      display: flex;
      justify-content: flex-end;

      button {
        margin: 0;
        height: 50rpx;
        line-height: 50rpx;
        font-size: 23.11rpx !important;
        padding: 0 17.78rpx !important;
      }

      >.balance-btn {
        background-color: #fff;
      }

      >.recharge-btn {
        margin-left: 17.78rpx;
      }
    }
  }

  .balance-pop {
    width: 533.33rpx;
    border-radius: 17.78rpx;
    background-color: #ffffff;

    .pop-title {
      text-align: center;
      height: 83.56rpx;
      line-height: 85.56rpx;
      font-size: 28.44rpx;
      font-weight: 600;
      border-bottom: 1px solid #eaeaea;
    }

    .pop-body {
      padding: 42.67rpx;
      border-bottom: 1px solid #eaeaea;

      >view+view {
        margin-top: 35.56rpx;
      }

      .label {
        line-height: 50rpx;
      }

      input {
        height: 67.56rpx;
        padding: 0 17.78rpx;
        line-height: 67.56rpx;
        border-radius: 7.11rpx;
        background: #f1f2f5 !important;
      }
    }

    .pop-footer {
      text-align: center;
      height: 88.89rpx;
      line-height: 88.89rpx;
    }
  }

  .flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
  }
</style>